<template>
    <div class="ed-tree">
        <el-popover
                ref="popover"
                placement="bottom-start"
                trigger="click">
            <el-tree
                    :data="treeData"
                    :props="treeProps"
                    :node-key="treeProps.value"
                    @node-click="onClickNode"
                    highlight-current
                    style="min-width: 300px"
                    ref="tree">
            </el-tree>
            <el-input
                    slot="reference"
                    ref="input"
                    v-model="labelModel"
                    :placeholder="treeForm.placeholder"
                    suffix-icon="el-icon-arrow-down">
            </el-input>
        </el-popover>
    </div>
</template>

<script>
    import {edTreeRequest} from "src/api/permission"
    export default {
        name: "EdTree",
        // 树节点配置选项
        props: {
            treeForm: {
                type: Object,
                required: false,
                default:{
                    placeholder:"请选择上级组织"
                }
            },
            // 需要回显的数据对象
            setObj:{
                type: Object,
                required: false
            },
            treeProps:{
                type: Object,
                required: false,
                default: () => ({
                    parentId: 'parentId',   // 父级唯一标识
                    value: 'id',          // 唯一标识
                    label: 'orgName',
                    children: 'children',
                }),
            },
            // 接口url
            apiUrl:{
                type: String,
                required: false,
            }
        },

        mounted(){
            //组织树需要在组件里面请求数据,不在单独页面传递过来，防止接口反应慢 页面已经展示很久了 树还没有展示，编辑的时候就会报错
            this.query({},this.apiUrl,'post');
        },
        data(){
            return{
                treeData:[],
                labelModel:"",
            }
        },
        methods:{
            query(data,url,r){
                edTreeRequest(data,url,r).then(response => {
                    if(response.code == 20000) {
                        this.treeData = response.data;
                        // 编辑的时候是物业管理员需要默认物业企业
                        if(this.setObj && this.setObj.setId){
                            this.labelModel = this.setObj.setName;
                            setTimeout(()=>{
                                this.$refs.tree.setCurrentKey(this.setObj.setId);
                            },200)
                        }
                    }
                })
            },
            onClickNode(node) {
                this.$refs.popover.showPopper = false;
                this.labelModel = node.orgName;
                this.$emit('onclick',node);
            },
        }
    }
</script>

<style scoped>

</style>